<template>
  <div class="cpk-chart">
    <el-row :gutter="20">
      <el-col :span="24">
        <chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" width="100%" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from 'vue';
import ChartView from '@/components/chart/index.vue';
// import { Descriptions } from 'element-ui'
// Vue.use(Descriptions);
export default {
    name: 'cpkChart',
    components: {
        ChartView
    },
    data() {
        return {
            chartOpt: {
                legend: {
                    // 图例的数据数组。
                    data: ['Evaporation']
                },
                tooltip: {
                    // 触发类型
                    trigger: 'axis',
                    // 是配置坐标轴指示器的快捷方式
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        name: 'Evaporation',
                        type: 'line'
                    }
                ]
            }
        }
    },

    methods: {
        init() {

        },
        getParam(low, mean, up, top, lsl, usl) {
            const res = {};
            res['low'] = this.getFloat(low);
            res['mean'] = this.getFloat(mean);
            res['up'] = this.getFloat(up);
            res['top'] = this.getFloat(top);
            res['lsl'] = this.getFloat(lsl);
            res['usl'] = this.getFloat(usl);
            return res;
        },
        getFloat(numbers, digit = 3) {
            return (numbers.toFixed(digit) / 1).toString();
        },
        getCorrelationAnalysisTrendOption(data) {
            const xyArray = [];
            let xMin = data.xValueArray[0];
            let xMax = data.xValueArray[0];
            let yMin = data.yValueArray[0];
            let yMax = data.yValueArray[0];
            let equation = 'y=' + data.formatterB + '*x+' + data.formatterA;
            let regressionEquation = String(equation);
            let lsl = 'Subject LSL =' + data.lsl;
            let usl = 'Subject USL =' + data.usl;
            let rr = 'R² =' + data.RR;
            let summaryInfo = regressionEquation + '\n' + rr + '\n' + lsl + '\n' + usl;

            for (let x = 0; x < data.xValueArray.length && x < data.yValueArray.length; x++) {
                if (data.xValueArray[x] < xMin) {
                    xMin = data.xValueArray[x];
                }
                if (data.xValueArray[x] > xMax) {
                    xMax = data.xValueArray[x];
                }
                if (data.yValueArray[x] < yMin) {
                    yMin = data.yValueArray[x];
                }
                if (data.yValueArray[x] > yMax) {
                    yMax = data.yValueArray[x];
                }
                //for(let y = 0; y < data.yValueArray.length; y++ ){
                //    if(x === y){
                xyArray.push([data.xValueArray[x], data.yValueArray[x]])
                //    }
                //}
            };

            const markLineOpt = {
                animation: false,
                label: {
                    formatter: summaryInfo,
                    align: 'right'
                },
                lineStyle: {
                    type: 'solid'
                },
                tooltip: {
                    formatter: summaryInfo,
                },
                data: [[{
                    coord: [xMin, data.formatterA + data.formatterB * xMin],
                    symbol: 'none'
                }, {
                    coord: [xMax, data.formatterA + data.formatterB * xMax],
                    symbol: 'none'
                }]]
            };

            const option = {
                title: {
                    text: data.title,
                    // subtext: '相关系数：' + data.coefficientR,
                    left: 'center',
                    top: 0
                },
                grid: {
                    left: '10%',
                    right: '10%',
                },
                // [
                //     { x: '50%', y: '10%', width: '45%', height: '80%' },
                // ],
                tooltip: {
                    formatter: '{c}'
                },
                xAxis: [
                    { gridIndex: 0, min: xMin, max: xMax }
                ],
                yAxis: [
                    { gridIndex: 0, min: yMin, max: yMax }
                ],
                series: [
                    {
                        name: 'I',
                        type: 'scatter',
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        data: xyArray,
                        markLine: markLineOpt
                    }
                ],
                dataZoom: [
                    {
                        show: true,
                        type: 'inside',
                        start: 0,
                        end: 10,
                        minValueSpan: 10
                    },
                    {
                        show: true,
                        type: 'slider',
                        bottom: 10,
                        start: 98,
                        end: 100,
                        minValueSpan: 10
                    }
                ]
            };

            return option
        },

        // 获取相关性分析散点图数据
        getData() {
            let index = 0
            this.setEchartsList("correlationAnalysis");
            if (this.tabInfo["correlationAnalysis"]) {
                return
            } else {
                this.tabInfo["correlationAnalysis"] = true;
            }

            // 数据传参形式
            const spcQueryParam = this.getQueryParameter();
            this.httpService.post(Config.API_URL.SPC.GET_SPC_CORRELATION_DATA_URL, spcQueryParam,
                (successful, dataSet, res) => {
                    if (dataSet.stateCode === 'SYSTEM_SUCCESS') {
                        const spcStatisticsResults = _.get(dataSet, 'data', [])
                        for (let i = 0; i < spcStatisticsResults.length; i++) {
                            const spcStatisticsResult = spcStatisticsResults[i];
                            const title = _.get(spcStatisticsResult, 'reportName', '');
                            const lsl = _.get(spcStatisticsResult, 'lsl', '');
                            const usl = _.get(spcStatisticsResult, 'usl', '');
                            const formatterA = _.get(spcStatisticsResult, 'correlationResult.a', '');
                            const formatterB = _.get(spcStatisticsResult, 'correlationResult.b', '');
                            const coefficientR = _.get(spcStatisticsResult, 'correlationResult.r', '');
                            const RR = _.get(spcStatisticsResult, 'correlationResult.rr', '');
                            const xValueArray = _.get(spcStatisticsResult, 'correlationResult.xvalueArray', []);
                            const yValueArray = _.get(spcStatisticsResult, 'correlationResult.yvalueArray', []);
                            const resultArray = _.get(spcStatisticsResult, 'correlationResult.resultArray', []);

                            const xArr = xValueArray.join(',');
                            const xNewArray = xArr.split(',');
                            xNewArray.unshift('标准');
                            const yArr = yValueArray.join(',');
                            const yNewArray = yArr.split(',');
                            yNewArray.unshift('实测');
                            const resultArr = resultArray.join(',');
                            const resultNewArray = resultArr.split(',');
                            resultNewArray.unshift('判定');

                            const correAnalysisData = [
                                xNewArray,
                                yNewArray,
                                resultNewArray,
                                // ['标准', xNewArray],   // 标准为X轴的数据
                                // ['实测', yNewArray],   // 实测为Y轴的数据
                                // ['判定', rNewArray],   // 判定显示的为'OK' 'NG' 的数据
                            ];

                            const correlationAnalysisData = {
                                title: title,
                                formatterA: formatterA,
                                formatterB: formatterB,
                                coefficientR: coefficientR,
                                xValueArray: xValueArray,
                                yValueArray: yValueArray,
                                lsl: lsl,
                                usl: usl,
                                RR: RR,
                            };
                            this.analysisDataCorre.push(correAnalysisData);
                            this.correlationAnalysisDatas.push('data');
                            setTimeout(() => {
                                this.showCorrelationAnalysisTrendChart(correlationAnalysisData, i)
                            }, 50);
                        }

                    } else {
                        toastr.error(
                            dataSet.messageCode ? this.translate.instant(dataSet.messageCode, { value: this.translate.instant('PART') })
                                : dataSet.message);
                    }
                },
                (successful, msg, err) => {
                    toastr.error(msg);
                }
            );

        },
        // 相关性分析散点图展示
        showCorrelationAnalysisTrendChart(data, i) {
            this.Echarts.correlationAnalysisTrendChart[i] = echarts.init(document.getElementById(`correlationAnalysisTrendChart-${i}`));
            this.Echarts.correlationAnalysisTrendChart[i].setOption(EchartsClass.getCorrelationAnalysisTrendOption(data));
        }

    }
}
</script>

<style lang="scss" scoped>
.cpk-chart {
  .table {
    margin-bottom: 10px;

    // 滚动条默认宽度是16px 将thead的宽度减16px
    thead {
      width: calc(100% - 1em);
    }

    tbody {
      border: 1px solid #ddd;
      border-bottom: none;

      tr {
        border-bottom: 1px solid #ddd;

        td {
          border-right: 1px solid #ddd;
        }

        .last-cell {
          border-right: none;
        }
      }

      tr:nth-child(even) {
        background: #fbfce5 !important;
      }

      .text-blue {
        color: #5379de;
      }

      .width-label {
        width: 104px;
      }
    }
  }
}
</style>